<template>
    <div id="order">
        <!-- 日期筛选 -->
        <el-date-picker
            v-model="filerDate"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
        ></el-date-picker>
        <el-button @click="dialogFormVisible = true">添加订单</el-button>
        <DialogComponentVue
            :dialogFormVisible="dialogFormVisible"
            @close="dialogFormVisible = false"
        ></DialogComponentVue>
        <!-- 表格 -->
        <el-table :data="tableData" border style="width: 800px" @sort-change="sortChange">
            <el-table-column sortable="custom" fixed prop="id" label="id" width="150"></el-table-column>
            <el-table-column sortable="custom" fixed prop="create_time" label="日期" width="150">
                <template slot-scope="scope">{{ scope.row.create_time | timeToDate2 }}</template>
            </el-table-column>
            <el-table-column prop="title" label="订单名称" width="120"></el-table-column>
            <el-table-column prop="desc" label="订单描述" width="120"></el-table-column>
            <el-table-column prop="image" label="图片" width="120">
                <template slot-scope="scope">
                    <img :src="scope.row.image" style="width:50px;height:50px;" alt />
                </template>
            </el-table-column>
            <el-table-column sortable="custom" prop="status" label="状态" width="300"></el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                    <el-button type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="pageSize"
            :current-page="pageIndex"
            @current-change="pageChange"
        ></el-pagination>
    </div>
</template>

<script>
import DialogComponentVue from "./components/DialogComponent.vue"
export default {
    components: {
        DialogComponentVue
    },
    // 局部过滤器
    filters: {
        timeToDate(value) {
            return new Date(value).toLocaleDateString()
        }
    },
    data() {
        return {
            dialogFormVisible: false,
            tableData: [],
            pageIndex: 1,
            pageSize: 5,
            total: 0,
            sortBy: '',
            sortType: '',
            filerDate: null,
            startTime: '',
            endTime: ""
        }
    },
    created() {
        this.pageChange()
    },
    watch: {
        filerDate() {
            if (this.filerDate) {
                this.startTime = this.filerDate[0].getTime()
                this.endTime = this.filerDate[1].getTime()
            } else {
                this.startTime = ''
                this.endTime = ''
            }
            this.pageChange()
        }
    },
    methods: {
        sortChange({ prop, order }) {
            this.sortBy = prop;
            this.sortType = order === 'descending' ? 'desc' : 'asc'
            this.pageChange()
        },
        handleClick(row) {
            console.log(row);
        },
        pageChange(ind = 1) {
            this.pageIndex = ind;
            this.$api.getOrderList({
                pageIndex: this.pageIndex,
                pageSize: this.pageSize,
                sortBy: this.sortBy,
                sortType: this.sortType,
                start_date: this.startTime,
                end_date: this.endTime,
            }).then(res => {
                if (res.success) {
                    this.tableData = res.data.list; // 数据
                    this.total = res.data.total; // 总数
                }
            })
        }
    }
}
</script>

<style>
</style>